layui.define(['layer', 'miniPage', 'utils', 'element'], function (exports) {
    var $ = layui.jquery,
        layer = layui.layer,
        miniPage = layui.miniPage,
        utils = layui.utils,
        element = layui.element;
    var Vue = window.Vue
    if(!Vue) {
        layer.msg('请引入vue')
        return null
    }

    Vue.component('smartMenuModular', {
        template: '<dl class="layui-nav-child" :class="{\'set-padding\': deep !== 0}">' +
            '<dd  v-for="item in data" :key="item.id">' +
            '<a href="javascript:;" @click="search(item)" :class="{\'multiple\': item.children && item.children.length, \'layui-this\': item.id === currentId}">' +
            '<i class="fa fa-th-large" v-if="item.type == \'favorites\'"></i>' +
            '<span class="">{{item.nameCn}}</span>' +
            '<span class="layui-badge">{{item.smartCounts}}</span>' +
            '</a>' +
            '<smart-menu-modular ref="smartMenuModular" :data="item.children" :deep="deep + 1" @menu-change="handleMenuChange" :current-id="currentId" v-if="item.children && item.children.length"></smart-menu-modular>' +
            '</dd>' +
            '</dl>',
        props: {
            currentId: {
                type: [Number, String],
                default: ''
            },
            deep: {
                type: Number,
                default: 0
            },
            data: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        methods: {
            // setCurrentMenuId: function (id) {
            //     this.currentId = +id
            //     console.log('this.currentMenuId:', this.currentId)
            // },
            handleMenuChange: function (id) {
                this.$emit('menu-change', id)
            },
            search: function (item) {
                var _id = item.id;
                this.$emit('menu-change', _id);
                $('.left-menu-panel').find('.layui-this').removeClass('layui-this');
            }
        }
    });

    var initSmartMenu = function (config) {
        return new Vue({
            data: function () {
                return {
                    currentId: '',
                    menuList: [],
                    menuListTemp: []
                }
            },
            mounted: function () {
                this.getMenuInfo();
            },
            methods: {
                getMenuInfo: function (id) {
                    var that = this;
                    var _data = {};
                    if (id) {
                        _data = {baseSearchId: id}
                    }
                    utils.Ajax({
                        url: config.menuInfoUrl,
                        dataType: 'json',
                        type: 'get',
                        data: _data,
                        success: function (response) {
                            that.menuListTemp = response.data
                            that.menuList = utils.dataToTree(that.menuListTemp);

                            that.setQuery(that.menuList);

                            that.$nextTick(function () {
                                element.render('nav');
                                $('.left-menu-panel a').off('click');
                                $(config.el).find('.layui-nav-more').on('click', function (event) {
                                    event.stopPropagation();
                                    var $parent = $(this).parent().parent()
                                    $parent.hasClass('layui-nav-itemed') ? $parent.removeClass('layui-nav-itemed') : $parent.addClass('layui-nav-itemed');
                                })
                            })
                        }
                    })
                },
                menuChangeCallback: function (id) {
                    var obj = {}
                    if (id && config.queryKey) {
                        obj[config.queryKey] = id
                    }
                    utils.addQueryToUrlNoRefresh(obj);
                    this.currentId = id;
                    var menuItem = null
                    for(var index = 0; index < this.menuListTemp.length; index++) {
                        if(this.menuListTemp[index].id === +id) {
                            menuItem = this.menuListTemp[index]
                        }
                    }
                    if (typeof config.menuChangeCallback === 'function' && menuItem) {
                        config.menuChangeCallback({
                            smartType: menuItem.smartType,
                            smartId: menuItem.id
                        })
                    }
                },
                setQuery: function (data) {
                    var queryId = +utils.parseRouterQuery()[config.queryKey];
                    if (queryId) {
                        this.menuChangeCallback(queryId)
                    }
                },
                handleMenuChange: function(menuId) {
                    this.menuChangeCallback(menuId)
                },
                handleSmartEdit: function () {
                    var content = miniPage.getHrefContent('page/common/smartList.html');
                    layer.open({
                        title: '显示和隐藏智能分类',
                        area: '580px',
                        type: 1,
                        shade: 0.2,
                        maxmin:true,
                        content: content,
                        btn: ['确定', '取消'],
                        btnAlign: 'c',
                        yes: function(index, layero){
                            var $smartForm = layero.find('.smart-form');
                            $smartForm.find('[lay-filter="saveBtn"]').click();

                            return false;
                        },
                    });
                }
            }
        }).$mount(config.el);
    }

    exports('smartMenu', {
        initSmartMenu: initSmartMenu
    })
})
